<template>
    <el-dialog 
        title="商城授信额度" width="680px" class="quota-dialog"
        :visible.sync="dialogVisible"  :before-close="handleClose" :close-on-click-modal="false">
        <el-form class="form-wrap" :model="formData" label-width="110px" ref="elFormRef" :rules="rules">
            <el-form-item prop="point" label="商城授信额度">
                <el-input v-model="formData.point" maxlength="8" @input="handleInput">
                    <template slot="suffix">
                        <span>元</span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="proof_img" label="上传图片">
                  <file-upload
                      ref="imageUplodRef"
                      type="image"
                      :multiple="true"
                      :limit="1"
                      :show-file-list="true"
                      :file-list="imgList"
                      list-type="picture-card"
                      :oss-upload="true"
                      :on-change="handleUploadChange"
                      :save="false"
                      :class="{'hideSelected': imgList.length >= 1}">
                      <i class="el-icon-plus"></i>
                  </file-upload>
            </el-form-item>
            <el-form-item class="remark" prop="remark" label="备注">
                <el-input v-model="formData.remark" maxlength="40"></el-input>
                <span class="dialog-btn">
                    <el-button type="primary" plain @click="handleClose(true)">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </el-form-item>
        </el-form>
        <div class="search-list">
          <el-table
              class="header-gray"
              height="300px"
              :data="dataList"
              border>
              <el-table-column prop="point" align="center" min-width="80" show-overflow-tooltip label="授信额度"></el-table-column>
              <el-table-column prop="operator_name" align="center" min-width="120" show-overflow-tooltip label="操作人"></el-table-column>
              <el-table-column prop="proof_img" align="center" min-width="80" show-overflow-tooltip label="图片">
                  <template #default="{ row }">
                      <el-button type="text" @click="handlePreview(row)">点击查看</el-button>
                  </template>
              </el-table-column>
              <el-table-column prop="remark" align="center" min-width="120" show-overflow-tooltip label="备注"></el-table-column>
              <el-table-column prop="status" align="center" min-width="100" show-overflow-tooltip label="审核状态">
                  <template #default="{ row }">
                      <span :class="statusType[row.status].class">
                          {{ statusType[row.status].label }}
                      </span>
                  </template>
              </el-table-column>
              <el-table-column prop="create_time" align="center" min-width="150" show-overflow-tooltip label="添加时间"></el-table-column>
          </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group"></div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    :pager-count="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
        <!-- 文件预览 -->
        <file-preview ref="filePreviewRef"></file-preview>
    </el-dialog>
</template>
<script>
import { filterNumber } from '@/common/js/util.js'
import FileUpload from '@/components/home/file-upload.vue'
import FilePreview from '@/components/home/file-preview.vue'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id: Number
    },
    components: { FileUpload, FilePreview },
    data() {
        return {
            dialogVisible: false,
            formData: {
              store_id: '',
              point: '',
              proof_img: '',
              remark: ''
            },
            imgList: [],
            rules: {
                point: [{ required: true, message: '请填写商城授信额度', trigger: ['blur', 'change'] }],
                // proof_img: [{ required: true, message: '请上传图片', trigger: ['blur', 'change'] }]
            },
            dataList: [],
            statusType: [
                { label: '未审核', value: 0, class: 'color-danger' },
                { label: '已审核', value: 1, class: 'color-success' }
            ],
            pageArr: {    
                page: 1,                  // 当前页码
                pageSize: +localStorage.getItem('pageSize') || 20, // 每页显示数量
                total: 0                  // 数据总数
            },
        }
    },
    watch: {
        visible: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.dialogVisible = true
                    this.formData.store_id = this.id
                    this.getData()
                }
            }
        }
    },
    methods: {
        handleInput(val) {
            this.formData.point =  filterNumber(val, 2)
        },
        handleUploadChange(fileList) {
            this.imgList = fileList || []
            this.formData.proof_img = this.imgList[0].url
            this.$refs.elFormRef.clearValidate(['proof_img'])
        },
        getData() {
            const { pageSize, page } = this.pageArr
            let datas = { pageSize, page, store_id: this.id }
            this.$http.get(
                "/admin/auth/index.php?act=storesPermission&op=getPointQuotaList", 
                { params: datas }
            ).then(res => {
                if (res.code == 1) {
                    this.dataList = res.data.list || []
                    this.pageArr.total = res.data.total
                } else {
                    throw res.msg
                }
            }).catch(error => {
                error && this.$message.error(`${error}`)
            })
        },
        handleClose(done) {
            this.$refs.elFormRef.resetFields()
            this.imgList = []
            this.$emit("update:visible", false)
            done && done()
        },
        handleCancel() {
            this.handleClose()
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize)
            this.pageArr.pageSize = pageSize
            this.pageArr.page = 1
            this.getData()
        },
        handleCurrentChange(page) {
            this.pageArr.page = page
            this.getData()
        },
        handleSubmit() {
            this.$refs.elFormRef.validate(valid => {
                if (valid) {
                    const newFormData = { ...this.formData }
                    this.$http.post(
                        "/admin/auth/index.php?act=storesPermission&op=addPointQuota", 
                        newFormData
                    ).then(res => {
                        if (res.code == 1) {
                            this.$message.success('添加成功')
                            this.$refs.elFormRef.resetFields()
                            this.imgList = []
                            this.getData()
                        } else {
                            throw res.msg
                        }
                    }).catch(error => {
                        error && this.$message.error(`${error}`)
                    })
                }
            })
        },
        handlePreview(row) {
            this.$refs.filePreviewRef.preview({ type: 'image', url: row.proof_img || '_', name: '凭证图片' })
        }
    }
}
</script>
<style lang="scss">
.quota-dialog {
    text-align: center;
    &::after {
        content: "";
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
    }
    .el-dialog {
        margin: auto!important;
        max-height: 89%;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        backface-visibility: hidden;
        text-align: left;
    }
    .el-dialog__body {
        padding-top: 10px;
        overflow: hidden auto;
        max-height: calc(100% - 70px);
        box-sizing: border-box;
        padding-bottom: 12px;
        .el-form-item {
          .el-input__suffix {
            margin-right: 6px;
          }
          .el-input {
            width: 300px;
            + .dialog-btn {
              margin-left: 10px;
            }
          }
          .remark .el-form-item__content {
            display: flex;
            justify-content: flex-start;
          }
        }
    }
    .el-table__header [name="gutter"] {
        width: 7px;
    }
    .search-list .el-table__body-wrapper {
        .el-table__body { width: 100%!important; }
        &::-webkit-scrollbar { 
            width: 7px;
            height: 7px;
        }
        //滚动条的滑块
        &::-webkit-scrollbar-thumb {
            cursor: pointer;
            background-color: rgba(144, 147, 153, 0.3);
            border-radius: 7px;
        }
    }
    .paginationOne { padding-right: 0; }
    .file-upload-wrapper {
        &.hideSelected .file-upload__selected {
            display: none;
        }
        .item-picture-card {
            margin-bottom: 0;
        }
    }
}
</style>